<template>
    <div class="login">
        <img :src="loginIcon" alt="用户注册" class="login-img" />
        <div class="login-input">
            <input
                class="login-input-item"
                placeholder="请输入用户名"
                v-model="userInfo.username"
            />
        </div>
        <div class="login-input">
            <input
                class="login-input-item"
                placeholder="请输入密码"
                type="password"
                v-model="userInfo.password"
            />
        </div>
        <div class="login-btn" @click="handleLogin">登录</div>
        <div class="login-link">
            <span class="login-link-item">用户注册</span>
            |
            <span class="login-link-item">忘记密码</span>
        </div>
    </div>
    <PopUp v-if="msgData.show" :msg="msgData.message" />
</template>

<script setup>
import { ref, reactive, toRefs } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/store/user'
import { imgLocalUrl } from '@/utils/img_url'
import PopUp from '@/components/PopUp/index.vue'

const loginIcon = imgLocalUrl('@/assets/icons/user@2x.png')
const userStore = useUserStore()
const router = useRouter()

const userInfo = ref({
    username: 'admin',
    password: 123456
})

const msgData = ref({
    show: false,
    message: ''
})

const showMsg = (info) => {
  msgData.value.show = true
  msgData.value.message = info
  setTimeout(() => {
    msgData.value.show = false
    msgData.value.showMessage = ''
  }, 3000)
}

const handleLogin = async() => {
    try {
        console.log(userInfo.value.username, userInfo.value.password)
        if ((!userInfo.value.username) || (!userInfo.value.password)) {
            showMsg('用户名和密码不能为空')
            return
        } 
        const param = {
            username: userInfo.value.username,
            password: userInfo.value.password
        }
        const res = await userStore.userLogin(param)
        if (res?.code == 0) {
            localStorage.isLogin = true
            showMsg('登陆成功')
            setTimeout(() => {
                router.push('/home')
            }, 2000)
        } else {
            showMsg('登陆失败')
        }
    } catch (error) {
        showMsg('请求失败')
    }
}

</script>

<style lang="scss" scoped>
.login {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 90vh;
  &-img {
    display: block;
    width: 10.5rem;
    height: 10.5rem;
    margin-bottom: 2rem;
  }
  &-input {
    height: 3rem;
    margin-bottom: 1.6rem;
    padding: 0 1.6rem;
    background: #f9f9f9;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0.5rem;
    &-item {
      line-height: 3rem;
      border: none;
      outline: none;
      width: 100%;
      background: none;
      font-size: 1.4rem;
      color: #777;
      &::placeholder {
        color: #b5b5b5;
      }
    }
  }
  &-btn {
    margin-bottom: 1.6rem;
    line-height: 3.2rem;
    width: 23rem;
    background: #0091ff;
    box-shadow: 0 0.4rem 0.8rem 0 rgba(0, 145, 255, 0.32);
    border-radius: 0.4rem;
    color: #fff;
    font-size: 1.6rem;
    text-align: center;
  }
  &-link {
    line-height: 3rem;
    color: #777;
    font-size: 1.3rem;
    text-align: center;
    &-item {
      margin: 0 0.5rem;
    }
  }
}
</style>
